<template>
	<div class="footer-nav" :show-vertical-dividers="false">
		<router-link class="nav-item" v-for="(item,index) in navs" :key="index" :to="item.link">
			<div class="footer-icon">
				<img :src="item.key===active?item.activeIcon:item.icon">
			</div>
			<span>{{item.label}}</span>
		</router-link>
	</div>
</template>

<script>
	import { mapGetters } from "vuex";
	const items = (label, key, link) => ({
		label,
		link,
		key,
		icon: require(`../assets/images/icon-${key}-default.png`),
		activeIcon: require(`../assets/images/icon-${key}-active.png`),
	})
	export default {
		name: 'footer-nav',
		created() {
			this.active = this.$route.name;
		},
		data() {
			return {
				active: 'home',
				// navs: [
				// 	items('首页', 'home', '/home'),
				// 	items('跳蚤街', 'tsj', '/two'),
				// 	items('消息', 'msg', '/message'),
				// 	items('购物车', 'cart', '/cart'),
				// 	items('我的', 'personCenter', '/personCenter?userId='+),
				// ]
			}
		},
		computed: {
			...mapGetters({
              userId: 'doneUserId',
            }),
			navs: function(){
				var userId = this.userId
				// console.log('footer-userId:'+userId)
				var arr = [
					items('首页', 'home', '/home'),
					items('跳蚤街', 'tsj', '/two'),
					items('消息', 'msg', '/message'),
					items('购物车', 'cart', '/cart?userId='+userId),
					items('我的', 'personCenter', '/personCenter?userId='+userId)
				]
				return arr
			}
		},
		created(){
			// this.useId = localStorage.getItem('useId')
		}
	}
</script>

<style lang="less" scoped>
	.footer-nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 1.36rem/* 102/75 */
		;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.24);
		.nav-item {
			// padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			&::after {
				border: none;
			}
			.footer-icon {
				width: .56rem/* 42/75 */
				;
				height: .64rem/* 48/75 */
				;
				img {
					width: 100%;
				}
			}
			span {
				color: #444444;
			}
			&.active {
				span {
					color: #ff5558;
				}
			}
		}
	}
	.two-warp{
		padding-bottom: 80px;
	}
</style>


